<template>
    <div>
        <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
      />
      <Editor
        :defaultConfig="editorConfig"
        :mode="mode"
        v-model="valueHtml"
        style="height: 400px; overflow-y: hidden"
        @onCreated="handleCreated"
        @onChange="handleChange"
      />
    </div>
</template>

<script setup>
    import '@wangeditor/editor/dist/css/style.css';
    import { ref,reactive,inject ,onMounted, onBeforeUnmount, shallowRef } from 'vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

    // 引入服务器地址路径
    const server_url = inject('server_url')
    // 编辑器实例，必须用 shallowRef，重要！
    const editorRef = shallowRef();
    // 在 toolbarConfig 里面删除视频上传按钮
    const toolbarConfig = { excludeKeys:["uploadVideo"]};
    const editorConfig = { placeholder: '请输入内容...' };

    // 初始化menu_conf ，否则会报错
    editorConfig.MENU_CONF = {}

    editorConfig.MENU_CONF['uploadImage'] = {
        // 小于该值就插入 base64 格式（而不上传），默认为 0
        base64LimitSize: 10 * 1024, // 10kb
        // 这里需要写完整的服务端地址 将服务器地址与分地址组合
        server: server_url + '/upload/rich_editor_upload',
    }

    editorConfig.MENU_CONF['insertImage'] = {
        parseImageSrc:(src) => {
            if(src.indexOf("http") !== 0){
                return `${server_url}${src}`
            }
            return src
        }
    }

    const mode = ref("default")

    const valueHtml = ref("")

    const props = defineProps({
        modelValue:{
            type:String,
            default:""
        }
    })

    // 向外抛出数据事件
    const emit = defineEmits(["update:model-value"])
    let initFinished = false

    // 在 onMounted 时间下执行延时方法
    onMounted(()=>{
          setTimeout(() => {
              valueHtml.value = props.modelValue;
              initFinished = true;
          }, 200);
 
    });

 

    // 组件销毁时，也及时销毁编辑器，重要！
    onBeforeUnmount(() => {
        const editor = editorRef.value;
        if (editor == null) return;

        editor.destroy();
    });

    // 编辑器回调函数
    const handleCreated = (editor) => {
      console.log('created', editor);
      editorRef.value = editor; // 记录 editor 实例，重要！
    };
    const handleChange = (editor) => {
          
        if(initFinished){
            emit("update:model-value",valueHtml.value)
        }

 
    };

</script>

<style lang="scss" scoped>

</style>